<script type="text/javascript">
    var enable_submit = true;
    function submit_rrclient_create() {
        var modal_selector = $("#rrclient_create_modal");
        var name = modal_selector.find("#name");
        var src_volume_path = modal_selector.find("#src_volume_path_cr");
        var dst_volume_path = modal_selector.find("#dst_volume_path_cr");
        var interval = modal_selector.find("#interval_cr");
        var qos = modal_selector.find("#qos_cr");
        var remotecopy_sites = modal_selector.find(".remotecopy_sites");

        var bValid = true;
        bValid = bValid && checkNull(name, "名称不允许为空。");
        bValid = bValid && checkLength(name, "名称", 3, 32);
        bValid = bValid && checkNull(src_volume_path, "源卷不允许为空。");
        bValid = bValid && checkNull(dst_volume_path, "目标卷不允许为空。");
        bValid = bValid && checkDestVolume(dst_volume_path);
        bValid = bValid && checkNull(interval, "复制间隔不允许为空。");
        bValid = bValid && checkRegexp_num(interval, /^[0-9]+$/i, "复制间隔必须为大于0的整数。");
        if(qos.val()) {
            bValid = bValid && checkRegexp_num(qos, /^[0-9]+$/i, "带宽必须为大于0的整数。");
        }
        if(!bValid) {
            return;
        }
        var site_ids = _multi_checkbox_get_ids(remotecopy_sites);
        if (site_ids == '') {
            $('.rtn-tip').text('必须选择站点。').slideDown('fast');
            return;
        }

        if (bValid) {
            if (enable_submit) {
                enable_submit = false;
                var $submitBtn = $('.modal-footer').find('.btn-blue');
                $submitBtn.html('<i class="fa fa-spinner fa-spin" style="margin:3px 6px;"></i>');
                $('.rtn-tip').slideUp('fast');
                $.post("/rrclient_create", {
                        "name": name.val(),
                        "src_volume_path": src_volume_path.attr('realvalue'),
                        "dst_volume_path": dst_volume_path.val(),
                        "interval": interval.val(),
                        "qos": qos.val(),
                        "site_ids": site_ids
                    },
                    function (data) {
                        if (data.reply.is_success) {
                            angular.element('#rrclient_controller').scope().close();
                            $('#rrclient_table').trigger("reloadGrid")
                        } else {
                            error = data.reply.error;
                            $('.rtn-tip').text(error).slideDown('fast');
                            $submitBtn.html(SelfTranslate("[[ 'label ok'|translate ]]"));
                            enable_submit = true;
                        }
                    });
            }
        }
    }

        function change_dst_volume_path(value, realval){
            $("#rrclient_create_modal").find("#dst_volume_path_cr").val(value);
        }
    $(function() {
        var vols = [];
        {% for volume in volumes %}
        var values = new Array();
        values[0] = "{{ volume.path }}";
        values[1] = "{{ volume.path }}";
        vols.push(values)
        {% endfor %}
        $('#src_volume_path_cr').rqDropDown({
            position: true,
            "datatype": "local",
            "source": vols,
            "onchange": "change_dst_volume_path",
        });

        var obj = {
            'name':'由3至32位字符构成。'
        }
        bindMouseEvent('#rrclient_create_modal', obj);
        /* 为小图标绑定鼠标移入移出事件结束 */
    });
</script>
<div class="modal-header">
    <h3>创建复制关系</h3>
</div>
<div class="modal-body modal-body-height" id="rrclient_create_modal">
    <div class="user-create-box">
        <div class="rtn-tip"></div>
        <table class="base-info">
            <tr>
                <td>
                    <label>名称</label><a>*</a>
                </td>
                <td colspan="3">
                    <input id="name" name="name" type="text"/>
                    <i class="fa fa-question-circle" itype="name"></i>
                </td>
            </tr>
            <tr>
                <td>
                    <label>站点</label><a>*</a>
                </td>
                <td>
                    {% for rrserver in rrservers %}
                    <input type="checkbox" class="remotecopy_sites" value="{{rrserver.id}}"/>{{rrserver.address}}
                    {% endfor %}
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <table class="super-info">
            <tr>
                <td>
                    <label>源卷</label><a>*</a>
                </td>
                <td>
                    {% if volumes %}
                    <input id="src_volume_path_cr" readonly="readonly" class="rounded_dropdown"
                           value='{{volumes[0].path}}' realvalue="{{volumes[0].path}}"/>
                    {% else %}
                    <input id="src_volume_path_cr" readonly="readonly" class="rounded_dropdown" value='未创建卷'
                           realvalue=""/>
                    {% endif %}
                </td>
                <td>
                    <label>目标卷</label><a>*</a>
                </td>
                <td>
                    {% if volumes %}
                    <input id="dst_volume_path_cr" name="dst_volume_path_cr" size="25" type="text"
                           value='{{volumes[0].path}}'/>
                    {% else %}
                    <input id="dst_volume_path_cr" name="dst_volume_path_cr" size="25" type="text"/>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td>
                    <label>复制间隔</label><a>*</a>
                </td>
                <td>
                    <input id="interval_cr" name="interval_cr" size="25" type="text" value="60"/>
                    <span class="unit">秒</span>
                </td>
                <td>
                    <label>带宽</label>
                </td>
                <td>
                    <input id="qos_cr" name="qos_cr" size="25" type="text"/>
                    <span class="unit">Mb/s</span>
                </td>
            </tr>
        </table>
    </div>
    <div class="error-tip">
        <p></p>
        <span></span></div>
    <div class="tip">
        <p></p>
        <span></span></div>
</div>
<div class="modal-footer">
    <button class="btn btn-blue" ng-click="ok()">[[ 'label ok'|translate ]]</button>
    <button class="btn btn-white" ng-click="cancel()">[[ 'label cancel'|translate ]]</button>
</div>

